<template>
    <div>
        <div class="header">
            <text class="headerName">{{headerName}}</text>
        </div>
        <div class="footer">
            <div class="footItem" :class="{ active: homeActive}" @click="jump('/home','我的主页')"><text>主页</text></div>
            <div class="footItem" :class="{ active: musicActive}" @click="jump('/showMusic','我的音乐')"><text>音乐</text></div>
            <div class="footItem" :class="{ active: videoActive}" @click="jump('/showVideo','我的视频')"><text>视频</text></div>
            <div class="footItem" :class="{ active: myActive}" @click="jump('/phoneList','通讯录')"><text>通讯录</text></div>
        </div>
    </div>
</template>
<script>
export default {
  components: {
        
    },
    data (){
      return {
          homeActive: 1,
          musicActive: 0,
          videoActive: 0,
          myActive: 0,
          headerName: '我的主页'
      }
    },
    methods: {
        jump: function(url,headerName) {
            this.homeActive = 0;
            this.musicActive = 0;
            this.videoActive = 0;
            this.myActive = 0;
            if(url === '/home'){
                this.homeActive = 1;
            }else if( url === '/showMusic' ){
                this.musicActive = 1;
            }else if( url === '/showVideo' ){
                this.videoActive = 1;
            }else{
                this.myActive = 1;
            }
            this.$router && this.$router.push(url);
            this.headerName = headerName;
        }
    }
}
</script>
<style>
    .header{
        position:fixed;
        height:1rem;
        line-height:1rem;
        left:0;
        right:0;
        top:0;
    }
    .header p{
        height:100%;
        line-height:1rem;
        text-align:Center;
    }
    .footer{
        position: fixed;
        height:1rem;
        line-height:1rem;
        border-top:1px solid deepskyblue;
        bottom:0;
        left: 0;
        right: 0;
        display:inline-block;
    }
    .footItem{
        display:inline-block;
        width:25%;
        text-align:center;
        height:100%;
        line-height:1rem;
    }
    .footItem p{
        text-align:center;
        height:100%;
        line-height:1rem;
    }
    .footItem.active p{
        color:deepskyblue;
    }



</style>

